/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
function tempDashBoard() {
        var datatbl = new google.visualization.DataTable();
        //get the data from the file and load it into the google datatable
    $.getJSON('/fetchData.php?data={Fields:Date,Temp,FeelsLike,Pressure|Sort:Date,Ascending|Interval:30}', function(data) {

             var noElements = data.length;
             datatbl.addColumn('string', 'Date');
             datatbl.addColumn('number', 'Temp');
             datatbl.addColumn('number', 'Dew Point');
             datatbl.addColumn('number', 'Pressure');
             datatbl.addRows(noElements);
        
        //Put the data into the datatable
        $.each(data, function(i, v) {
            // set the values for both the name and the population
            
            datatbl.setValue(i, 0, v.Date.substr(10));
            datatbl.setValue(i, 1, v.Temp);
            datatbl.setValue(i, 2, v.FeelsLike);
            datatbl.setValue(i, 3, v.Pressure);
        });

        var options = {
          title: 'Temperatures and Pressure Dashboard',
          series:{2:{targetAxisIndex:1}}, vAxes:{1:{title:'Pressure',textStyle:{color: 'orange'}}}
        };

 var dashboard = new google.visualization.Dashboard(
       document.getElementById('dashboard'));

var control = new google.visualization.ControlWrapper({
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': {
// Filter by the date axis.      
       'filterColumnIndex': 0,
       'ui': {
         'chartType': 'LineChart',
         'chartOptions': {
           'chartArea': {'width': '90%'},
           'hAxis': {'baselineColor': 'none'}
         },
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).         
         'chartView': {
           'columns': [0, 3]
         },
       
         'minRangeSize': 86400000
       }
     },
 // Initial range: 2012-02-09 to 2012-03-20.   
     'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
   });


    //declare the chart (which is a table) and draw it 
    var chart = new google.visualization.LineChart(document.getElementById('graph_temp_dashboard_div'));
        chart.draw(datatbl, options);
      });
}

